<template>
  <a-drawer
    title="车辆信息"
    placement="right"
    :visible="visible"
    width=650
    :after-visible-change="afterVisibleChange"
    @close="onClose"
  >
    <ul class="vehicleList">
      <li v-for="(row, index) in showFields" :key="row.dataIndex">
        <span class="is--label">{{ row.title }}:</span>
        <span class="is--value">{{ row.customRender ?
          row.customRender(data[row.dataIndex], row, index) :
          data[row.dataIndex]
        }}</span>
      </li>
      <li v-if="data.images">
        <span class="is--label">图片:</span>
        <span class="is--value">
          <!-- <img v-for="(img, idx) in data.images" :key="idx" :src="`http://106.52.159.148/auction/images${img}`"/> -->
          <img v-for="(img, idx) in data.images" :key="idx" :src="`/auction/images${img}`"/>
        </span>
      </li>
    </ul>
  </a-drawer>
</template>
<script>
import { vehicleFields } from './config.js'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      showFields: vehicleFields.filter(f => f.dataIndex !== 'operation')
    }
  },
  methods: {
    afterVisibleChange (val) {
      console.log('visible', val)
    },
    onClose () {
      this.$emit('close')
    }
  }
}
</script>
<style lang="less" scoped>
.vehicleList{
  list-style: none;
  li{
    display: flex;
    margin-top: 12px;
    .is--label{
      width: 100px;
      text-align: right;
      padding-right:15px;
      color: rgba(0,0,0,.85);
    }
    img{
      display: block;
      margin-bottom: 10px;
      max-width: 100%;
      border: 1px solid #ddd;
    }
  }
}
</style>
